import React from 'react'
import { useDispatch } from 'react-redux'
import { asyncAddTodo } from '../../app/features/todoSlice';

export default function TodoHeader() {
  //获取 dispatch 函数
  let dispatch = useDispatch();
  return (
    <div className="todo-header">
      <input onKeyUp={(e) => {
        // 绑定 keyup 事件
        if(e.code === 'Enter'){
          dispatch(asyncAddTodo(e.target.value));
        }
      }} type="text" placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
